<template>
  <div class="params-item">
    <el-select class="params-item__type" placeholder="参数类型" v-model="value.jnpfKey"
      @change="handleChangeParamsType">
      <el-option v-for="(item, index) in paramsTypeOptions" :key="index" :label="item.label"
        :value="item.value"></el-option>
    </el-select>
    <el-input class="params-item__field" placeholder="参数名称" v-model="value.field" clearable />

    <div class="params-item__value">
      <!-- 数值 -->
      <el-input-number v-if="value.jnpfKey === 'inputNumber'" placeholder="参数值"
        v-model="value.fieldValue" controls-position="right" />
      <!-- 日期时间 -->
      <JnpfDatePicker v-else-if="value.jnpfKey === 'datePicker'" v-model="value.fieldValue"
        clearable :value="value.format" placeholder="参数值" />
      <!-- 时间 -->
      <el-time-picker v-else-if="value.jnpfKey === 'timePicker'" placeholder="参数值"
        v-model="value.fieldValue" :format="value.format" />
      <!-- 人员 -->
      <JnpfUserSelect v-else-if="value.jnpfKey === 'userSelect'" v-model="value.fieldValue"
        placeholder="参数值" clearable multiple />
      <!-- 部门 -->
      <JnpfDepSelect v-else-if="value.jnpfKey === 'depSelect'" v-model="value.fieldValue"
        placeholder="参数值" clearable multiple />
      <!-- 角色 -->
      <JnpfRoleSelect v-else-if="value.jnpfKey === 'roleSelect'" v-model="value.fieldValue"
        placeholder="参数值" clearable multiple />
      <!-- 文本 -->
      <el-input v-else placeholder="参数值" v-model="value.fieldValue" />
    </div>

    <div class="params-item__control">
      <el-button type="danger" icon="el-icon-delete" circle @click="$emit('delete')"></el-button>
    </div>
  </div>
</template>

<script>
const PARAMS_TYPE_OPTIONS = [
  {
    label: '文本',
    value: 'input',
  },
  {
    label: '数值',
    value: 'inputNumber',
  },
  {
    label: '日期时间',
    value: 'datePicker',
    format: 'yyyy-MM-dd HH:mm:ss'
  },
  {
    label: '时间',
    value: 'timePicker',
    format: 'HH:mm:ss'
  },
  {
    label: '人员',
    value: 'userSelect',
  },
  {
    label: '部门',
    value: 'depSelect',
  },
  {
    label: '角色',
    value: 'roleSelect',
  }
]


export default {
  name: 'ParamsItem',
  props: {
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      paramsTypeOptions: PARAMS_TYPE_OPTIONS
    }
  },
  methods: {
    handleChangeParamsType(jnpfKey) {
      const item = this.paramsTypeOptions.find(item => item.value === jnpfKey)
      this.$emit('input', {
        ...this.value,
        jnpfKey,
        format: item.format || '',
        fieldValue: ''
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.params-item {
  display: flex;

  &__type {
    width: 200px;
  }

  &__field {
    width: 200px;
  }

  &__value {
    width: 500px;

    ::v-deep .el-input,
    .el-select,
    .el-input-number,
    .el-date-editor {
      width: 100%;
    }
  }

  &__control {
    margin-left: 6px;
  }
}
</style>
